<template>
  <view v-if="resultDetails" class="container">
    <view v-if="resultShow" class="result-container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
      <image :src="staticImgs.resultBack" class="back-btn" @click="showResult(false)" mode="widthFix" key="back-btn" />
      <view class="main-title">{{resultDetails.name}}</view>
      <view class="main-content">
        <view class="item" :class="item.classNames" v-for="(item, index1) in listData" :key="index1">
          <template v-if="!item.extra">
            <view class="flex-cc">
              <view class="title flex-cc" :style="{backgroundImage: `url(${staticImgs.title})`}">{{item.title}}</view>
            </view>
            <view class="content">
              <template v-if="Array.isArray(item.content)">
                <view v-for="(text, index2) in item.content" :key="index2">
                  <template v-if="text.title">
                    <view class="content-title">{{text.title}}</view>
                    <view class="content-text">
                      <template v-if="Array.isArray(text.content)">
                        <view v-for="(contentText, index3) in text.content" :key="index3">{{contentText}}</view>
                      </template>
                      <template v-else>{{text.content}}</template>
                    </view>
                  </template>
                  <template v-else>{{text}}</template>
                </view>
              </template>
              <template v-else>{{item.content}}</template>
            </view>
            <image class="img" :src="item.img" v-if="item.img" mode="widthFix" />
          </template>
          <view v-else class="extra flex-cc" :style="{backgroundImage: `url(${staticImgs.img3})`}">
            <view v-for="(extraItem, index4) in item.extra" :key="index4">
              <view class="flex-cc">
                <view class="extra-title flex-cc">{{extraItem.title}}</view>
              </view>
              <view class="extra-content">{{extraItem.content}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="share-container">
      <image :src="resultImg" mode="widthFix" class="share-bg" show-menu-by-longpress />
      <image :src="`${imgBaseUrl}${resultDetails.mask}`" class="mask-bg" />
      <image :src="staticImgs.resultBtn" class="result-btn" @click="showResult(true)" mode="widthFix" key="result-btn" />
      <view class="download">
        <view class="download-text">长按保存</view>
        <image :src="staticImgs.downloadIcon" class="download-icon" />
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {useDrawPoster} from '@/components/u-draw-poster'

  export default {
    props: {
      pageData: {
        type: Object,
        default: null
      }
    },
    data(){
      return {
        staticImgs: {
          bg: this.imgBaseURL + '/scl/result/animalforest/bg.png',
          resultBack: this.imgBaseURL + '/scl/result/animalforest/back.png',
          img1: this.imgBaseURL + '/scl/result/animalforest/img1.png',
          img2: this.imgBaseURL + '/scl/result/animalforest/img2.png',
          img3: this.imgBaseURL + '/scl/result/animalforest/img3.png',
          title: this.imgBaseURL + '/scl/result/animalforest/title-bg.png',
          defaultQrcode: this.imgBaseURL + '/scl/default_miniapp_qrcode_new.png',
          resultBtn: this.imgBaseURL + '/scl/result/animalforest/view-btn-v2.png',
          downloadIcon: this.imgBaseURL + '/scl/result/animalforest/download.png'
        },
        resultDetails: undefined,
        imgBaseUrl: this.imgBaseURL,
        resultShow: false,
        resultImg: '',
        listData: []
      }
    },
    computed: {
      ...mapGetters('user', ['clientUserUid'])
    },
    watch:{
      pageData: {
        handler(val) {
          if (val) {
            const resultDetails = val.resultDetails
            this.resultDetails = resultDetails
            this.listData = [
              {
                title: '欲望特质',
                content: resultDetails.lust,
                classNames: ['big', 'center']
              },
              {
                title: '长期困扰',
                content: resultDetails.trouble,
                classNames: ['center']
              },
              {
                title: '主要特征',
                content: resultDetails.feature
              },
              {
                title: '主要特质',
                content: resultDetails.trait,
                img: this.staticImgs.img1
              },
              {
                title: '生活风格',
                content: resultDetails.lifestyle
              },
              {
                title: '人际关系',
                content: resultDetails.relationship,
                img: this.staticImgs.img2
              },
              {
                title: '情绪困扰',
                content: resultDetails.emotion
              },
              {
                extra: [
                  {
                    title: '基本恐惧',
                    content: resultDetails.fear
                  },
                  {
                    title: '基本欲望',
                    content: resultDetails.desire
                  }
                ]
              }
            ]
            this.initCanvas()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods:{
      showResult(flag) {
        this.resultShow = flag
        this.$emit('posterLoadingCom', flag)
      },
      async initCanvas() {
        let jumpUrl = 'p=2@id=' + this.pageData.sclId
        this.resultImg = await this.createChipCanvas(`${this.imgBaseURL}${this.resultDetails.img}`, jumpUrl);
      },
      /**
       * 绘制海报
       */
      async createChipCanvas(imgUrl, jumpUrl) {
        console.log(imgUrl, '-----------------imgUrl');
        const tmpScene = jumpUrl || 'r=5@id=' + this.clientUserUid
        const tmpPage = 'pages/index/index'
        let qrCode = this.staticImgs.defaultQrcode
        let imgD = ''
        const resSclInfo = await this.$u.api.getSclInfo({sclId:this.pageData.sclId})
        if(resSclInfo.data.data.url){
        	qrCode = resSclInfo.data.data.url
        }else{
        	const {
        		data: dRes
        	} = await this.$u.api.getQrcodeUrl({
        		sceneStr: tmpScene,
        		pageStr: tmpPage
        	})
        	
        	if (dRes.success) {
        		qrCode = dRes.data
        	}
        }
        console.log(qrCode, '----------qrCode')

        try {
          // 创建绘制工具
          const dp = await useDrawPoster({
            selector: 'dcanvas',
            loading: {
              create:'结果报告生成中...'
            },
            debug: true,
            width: 750,
            height: 1624
          })
          const w = dp.canvas.width
          const h = dp.canvas.height

          console.log(dp.canvas, '-----------dp.canvas-------')

          dp.draw(async (ctx) => {
            console.log(ctx, '-----------ctx')
            // 绘制背景图
            await ctx.drawImage(imgUrl, 0, 0, w, h)
            // 小程序二维码
            await ctx.drawRoundImage(qrCode, 138, 1431, 125, 125,
                100)
          })

          imgD = await dp.create()
        } catch (e) {
          console.log(e, '绘图')
        }
        console.log(imgD, '=========imgD')
        return imgD || imgUrl
      }
    },
    mounted() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
    },
    beforeDestroy() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    }
  }
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  min-height: 100vh;
}

.result-container {
  padding-bottom: 160rpx;
  background: {
    size: 100% auto;
    repeat: no-repeat;
    color: #2B5843;
    position: center top;
  }
}

.main-title {
  font-weight: bold;
  font-size: 40rpx;
  color: #432108;
  line-height: 56rpx;
  padding: 133rpx 0 174rpx;
  text-align: center;
}

.main-content {
  padding: 30rpx 0;
  margin: 0 25rpx;
  background-color: rgba(11, 44, 26, 0.5);
  border-radius: 28rpx;

  .item {
    padding: 30rpx 0;

    .title {
      font-weight: bold;
      font-size: 40rpx;
      color: #F4F7A9;
      white-space: nowrap;
      padding: 0 60rpx;
      height: 64rpx;
      background: {
        size: 100% 100%;
        repeat: no-repeat;
        position: center center;
      }
    }

    .content {
      font-size: 32rpx;
      color: #FFF;
      line-height: 50rpx;
      margin-top: 30rpx;
      padding: 0 45rpx;

      .content-title {
        margin-top: 30rpx;
        font-weight: bold;
        font-size: 36rpx;
        color: #FFF;
        line-height: 50rpx;
      }

      .content-text {
        margin-top: 30rpx;
      }
    }

    .img {
      width: 100%;
    }

    .extra {
      background: no-repeat center top / 100% 100%;
      padding: 0 128rpx 30rpx;
      margin: 0 30rpx;
      height: 604rpx;
      flex-direction: column;

      .extra-title {
        @extend .title;
        background-image: linear-gradient(to right, transparent 0%, #FFF 55%, transparent 100%);
        color: #3F1502;
        margin-top: 30rpx;
      }

      .extra-content {
        @extend .content;
        color: #333;
        text-align: center;
      }
    }

    &.big .content {
      font-size: 50rpx;
      line-height: 70rpx;
    }

    &.center .content {
      text-align: center;
    }
  }
}

.back-btn {
  position: fixed;
  right: 0;
  top: 782rpx;
  width: 146rpx;
}

.share-container {
  position: relative;
  height: 1624rpx;
  min-height: 100vh;
}

.share-bg {
  width: 100%;
  height: 1624rpx;
  min-height: 100vh;
  position: relative;
}

.mask-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: {
    image: linear-gradient(180deg, rgba(25, 79, 52, 0) 0%, #18482F 33%, #1A5330 100%);
    size: 100% 100%;
    position: center center;
    repeat: no-repeat;
  }
  pointer-events: none;
}

.result-btn {
  position: absolute;
  bottom: 117rpx;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 450rpx;
}

.download {
  position: absolute;
  bottom: 55rpx;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  .download-text {
    font-weight: bold;
    font-size: 29rpx;
    color: #FFF;
  }

  .download-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 12rpx;
  }
}
</style>